import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/gauge/lit-gauge-ring.ts"
import {GaugeRingProps} from "../../../echarts/gauge/lit-gauge-ring.ts";

const meta: Meta<GaugeRingProps> = {
    title: 'Echarts/LitGaugeRing',
    tags: ['autodocs'],
    render: (args: GaugeRingProps): TemplateResult => {
        return html`<lit-gauge-ring 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .thick=${args.thick}
            .gaugeData=${args.gaugeData}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        thick: { control: 'number' },
        gaugeData: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<GaugeRingProps>;

export const Default: Story = {
    args: {
        chartId: 'basic-gauge-ring-chart',
        width: '800px',
        height: '600px',
        thick: 1,
        gaugeData: [
            {
                value: 20,
                name: 'Perfect',
                title: {
                    offsetCenter: ['0%', '-30%']
                },
                detail: {
                    valueAnimation: true,
                    offsetCenter: ['0%', '-20%']
                }
            },
            {
                value: 40,
                name: 'Good',
                title: {
                    offsetCenter: ['0%', '0%']
                },
                detail: {
                    valueAnimation: true,
                    offsetCenter: ['0%', '10%']
                }
            },
            {
                value: 60,
                name: 'Commonly',
                title: {
                    offsetCenter: ['0%', '30%']
                },
                detail: {
                    valueAnimation: true,
                    offsetCenter: ['0%', '40%']
                }
            }
        ],
    }
}